<template>
  <!-- 信息发布表单模块 -->
    <div class="publish w clearfix">
        <h3>发布宅基地抵押信息<button class="go" @click="goHome();sendMsg()"> &lt; 返回首页 </button></h3>
        <div class="publish_form clearfix">
            <form action="">
                <ul class="clearfix">
                    <li>
                        <i class="red">*</i> 所在地区：<br> <input type="text" placeholder="请选择地区"> <span class="icon-cheveron-down"></span>
                    </li>
                    <li>
                        <i class="red">*</i> 姓名：<br> <input type="text" placeholder="请输入姓名">
                    </li>
                    <li>
                        <i class="red">*</i> 联系电话：<br> <input type="text" placeholder="请输入电话">
                    </li>
                    <li>
                        <i class="red">*</i> 身份证号：<br> <input type="text" placeholder="请输入身份证号">
                    </li>
                    <li>
                        <i class="red">*</i> 详细地址：<br> <input type="text" placeholder="请输入详细地址">
                    </li>
                    <li>
                        <i class="red">*</i> 宅基地面积：<br> <input type="text" placeholder="请输入面积"> <span>㎡</span>
                    </li>
                    <li>
                        <i class="red">*</i> 抵押贷款金额：<br> <input type="text" placeholder="请输入金额"> <span>万元</span>
                    </li>
                    <li>
                        <i class="red">*</i> 抵押年限：<br> <input type="text" placeholder="请输入年限"> <span>年</span>
                    </li>
                    <li>
                        <i class="red">*</i> 上传附件：<br>
                        <div class="file_style">
                            <span class="sc icon-upload">点击上传</span>
                            <input type="file" placeholder="请选择地区" class="file">
                        </div>
                    </li>
                </ul>
                <button type="button">立即发布</button>
            </form>
        </div>

        <!-- 客服服务模块start -->
        <div class="serviceperson clearfix">
            <div class="person">
                <div class="free left">免费咨询</div>
                <div class="only right"><img src="../../assets/style/img/service_image/在线咨询.svg" alt=""></div>
            </div>
            <div class="service">
                <div class="number">
                    <p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
                </div>
                <div class="message">
                    <i class="icon-wechat"></i>
                    <div class="dh">
                        <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                    </div>
                </div>
                <div class="input_content">
                    <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                    <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                    <button>发送</button>
                </div>
            </div>
        </div>
        <!-- 客服服务模块end -->
    </div>
</template>

<script>
import '../service'
export default {
  name:'Publish',
  data() {
    return {
      msg:true
    }
  },
  methods: {
    // 返回首页
    goHome(){
      // this.$emit('getMsg',this.msg);
      this.$router.push({
        name:'Home'
      });
      // window.location.reload()
    },
    sendMsg(){
       this.$store.commit('change',this.msg)
      // this.$emit('getPublish',this.msg)
    }
  },
}
</script>

<style lang='less' scoped>

// 信息发布表单模块
.publish{
  position: relative;
  padding-top: 30px;
  margin-bottom: 140px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  letter-spacing: 0;
  h3{
    font-size: 28px;
    color: #333333;
    border-left: 4px solid #EE384A;
      padding-left: 16px;
      font-weight: 400;
      .go{
        float: right;
        width: 86px;
        height: 36px;
        font-size: 16px;
        border-radius: 6px;
      }
  }
  .publish_form{
    margin-top: 30px;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-weight: 400;
    ul{
      margin-left: 106px;
      li{
        position: relative;
        float: left;
        width: 460px;
        margin-left: 80px;
        margin-bottom: 24px;
        .red{
          color: red;
        }
        span{
          position: absolute;
          top: 50px;
          right: 86px;
        }
      }
      .file{
        width: 160px;
        margin-top: 0;
        border: 1px solid #EE384A;
        opacity: 0;
      }
      .file_style{
        width: 160px;
        height: 50px;
        margin-top: 10px;
        display: inline-block;
        border: 1px solid #EE384A;
        border-radius: 4px;
        .sc{
          position: absolute;
          top: 50px;
          left: 40px;
          font-size: 16px;
          color: #EE384A;
        }

      }
    }
    input{
      margin-top: 10px;
      padding: 12px;
      width: 380px;
      height: 50px;
      background: #FFFFFF;
      border: 1px solid #CDCECE;
      border-radius: 4px;
    }
    button{
      width: 304px;
      height: 50px;
      background: #EE384A;
      border-radius: 4px;
      font-size: 16px;
      color: #FFFFFF;
      margin: 10px 50%;
      transform: translate(-50%);
    }
  }
}

// 客服咨询模块
.serviceperson{
  z-index: 999;
  position: absolute;
  top: 160px;
  right: -370px;
  width: 480px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    text-align: center;

    .free{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      background: #999;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .free::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>